require.config({
    map: {
        '*': {
            'css': '/cdn/css.min.js',
        }
    },
    // 默认自动加载的模块
    deps: [
        "css!/cdn/bootstrap/bootstrap.min.css"
    ],
    paths: {
        "vs": '/cdn/monaco-editor/min/vs'
    }
});

new Vue({
    el: "#app",
    methods: {
        initCode() {
            require(['vs/editor/editor.main'], () => {
                let editor = monaco.editor.create(document.getElementById('editor-container'), {
                    value: '',
                    language: "javascript",
                    theme: "vs-dark",
                    automaticLayout: true,
                    formatOnType: true,
                    peekWidgetDefaultFocus: "editor"
                });

                let cache = localStorage.getItem("page-jsrun-data");
                let initTitle = `// js测试练习编辑器,ctrl+s运行代码 \n`;
                editor.setValue(cache ? cache : initTitle);
                editor.focus();
                editor.setPosition({ lineNumber: 2, column: 1 });
                editor.addAction({
                    id: `yh-editor-runjs`,
                    label: "运行js",
                    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S],
                    precondition: null,
                    keybindingContext: null,
                    contextMenuGroupId: 'yh-editor',
                    contextMenuOrder: 10,
                    run: () => {
                        let data = editor.getValue();
                        localStorage.setItem("page-jsrun-data", data);
                        window.eval(data);
                    }
                });
                window.editor = editor;
            });
        }
    },
    mounted() {
        document.title = "JS在线测试编辑器";
        this.initCode();
    },
    template: `
    <div style="height:calc(100vh);overflow:hidden">
        <div id="editor-container" style="height:calc(100vh)"></div>
    </div>
    `
})